<template>
  <div class="login-main">
    <div style="float: right">
      <el-select
        v-model="isName"
        class="m-2"
        placeholder="Select"
        size="small"
        @change="isChange"
        style="width: 70px"
      >
        <el-option
          v-for="item in isArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <component :is="isName" @submitha="subMitHander"></component>

    <!-- <login01 />
    <login02 />
    <login03 /> -->
  </div>
</template>

<script>
/**
 * 实现多组件的注册切换
 * 第一种形式
 * 1.建一个入口 js把所要引入的组件进行统一引入  如./components/index.js文件
 * 2.在相应的使用多组件的 地方 进行引入 import {login01...} from './components'
 * 3.注册组件
 * 第二种形式
 * 1.使用require.context("@/views/login/components",false,/\.vue$/) 对相应文件夹下组件进行动态组装。改功能与业务无关，抽取成hook
 * 2.在相应的组件 进行引入 注册
 *
 * 本功能实现的形式是第二种   也留存第一种实现的部分代码
 */
import allComponentsLoginHook from "../../hook/allComponentsLoginHook";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

import { useRouter } from "vue-router";
export default {
  // 将./components 下的login组件全部注册
  components: allComponentsLoginHook(),
  setup() {
    let isArr = ref(objArr(allComponentsLoginHook()));
    let isName = ref("login01");
    const router = useRouter();

    // onMounted(() => {
    //   console.log(this, ">>>>>setup");
    // });
    // 对象拆分成数组
    function objArr(objs) {
      let arr = [];
      for (let key in objs) {
        // let element = obj[key];
        arr.push({
          label: "页面" + key.substring(key.length - 2, key.length),
          value: key,
        });
      }
      return arr;
    }

    // 下拉框实现页面切换
    function isChange(value) {
      isName.value = value;
    }

    // 路由跳转
    function add() {
      router.push({
        path: "/home",
      });
    }
    // 提交登录信息
    function subMitHander(form) {
      console.log(
        // form,
        `>>>>>登录信息 name:${form.value.name}，pwd:${form.value.pwd}`
      );
      if (form.value.name && form.value.pwd) {
        ElMessage({
          message: "success",
          type: "success",
        });
        localStorage.setItem(
          "usrToken",
          form.value.name + "_" + form.value.pwd
        );
        // 路由跳转
        add();
      } else {
        ElMessage({
          message: "请填写账号密码",
          type: "error",
        });
      }
    }

    return {
      isName,
      isArr,
      isChange,
      subMitHander,
    };
  },
};
</script>
<style lang="less" scoped>
.login-main {
  height: 100%;
}
</style>
